<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // 创建一个类
        class Persion {
            //构造器方法
            constructor(name, age){
                this.name = name;
                this.age = age;
            }
            // 一般方法
            speak(){
                console.log(this)
                console.log(`我叫${this.name}, 我的年龄是${this.age}`)
            }
            // 类中是可以直接写赋值语句, 相当于 直接给实例对象添加属性并赋值
            a = 1
        }
        // 创建一个对象
        const p1 = new Persion('tom',18);
        p1.speak();

        // 子类继承父类, 子类若写构造器则必须首先通过super调用父类的的构造器
        class Student extends Persion{
            constructor(name, age, grade){
                super(name, age);
                this.grade = grade;
            }
        }

        const s1 = new Student('小明', 15, '高一');

        // this指向问题
        // s1 是直接new出来的实例的指向, 可以通过s1直接调用 类内部的方法, 方法中的this没问题
        // 经过下面的方式调用, 方法中的this就会出现问题
        const x = s1.speak
        x()

    </script>
</body>
</html>